<template>
  <div class="comment">
    <headTop :headTitle="titleName"></headTop>

    <div class="box">
      <section class="hot-box">
        <div class="hot" v-if="hotcomment.length">热门评论</div>
        <div class="comment-item" v-for="item in hotcomment">
          <div class="user">{{item.ip_from ? item.ip_from : item.client_ip}}<span>{{item.uname}}</span></div>
          <div class="contant">
            <div class="cont">{{item.comment_contents}}</div>
            <div class="parent" v-if="item.parent.length>0">
              <span class="parent-sub">原评论：</span><span>{{item.parent[0].comment_contents}}</span>
            </div>
          </div>
          <div class="other">
            <div class="time">{{item.comment_date}}</div>
            <div class="uptimes">{{item.uptimes}}</div>
          </div>
        </div>
      </section>

      <section class="new-box"
               v-infinite-scroll="loadMore"
               infinite-scroll-disabled="busy"
               infinite-scroll-distance="20"
      >
        <div class="hot" v-if="newcomment.length">最新评论</div>
        <section class="project-list1">
          <comment-list :newcomment="newcomment"></comment-list>
        </section>
      </section>
      <section v-if="!newcomment.length">
        <div class="hot">暂无内容</div>
      </section>

      <loading :loadernone="loadernone"></loading>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import headTop from '../commen/head.vue'
  import Loading from '../commen/loading.vue'
  import CommentList from '../commen/commentlist.vue'
  import infiniteScroll from 'vue-infinite-scroll'
  import {newcomment, hotcomment} from '../../service/getData'

  const totalPage = 20

  export default {
    data() {
      return {
        titleName: '',
        page: 1,
        url: '',
        count: '',
        hotcomment: [],
        newcomment: [],
        busy: true,
        loadernone: false //  没有数据提示
      }
    },
    created() {
      this.init()
    },
    methods: {
      async init() {
        this.url = this.$route.query.url
        this.titleName = this.$route.query.title

        let response = await hotcomment(1, this.url)
        this.hotcomment = response.data.comments.slice(0, 10)

        response = await newcomment(this.page++, this.url)
        this.newcomment = response.data.comments

        this.count = response.data.count
        this.busy = false
      },
      async loadMore() {
        this.busy = true;
        this.loadernone = false;
        let total = Math.ceil(this.count / totalPage)
        if (this.page <= total && this.count > totalPage && this.count > 0) {
          let response = await newcomment(this.page++, this.url)
          this.newcomment = [...this.newcomment, ...response.data.comments]
        } else {
          this.loadernone = true;
          return false
        }
        this.busy = false;
      }
    },
    directives: {infiniteScroll},
    components: {
      headTop,
      Loading,
      CommentList
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/style/mixin";

  .comment {
    background-color: #fff;
    .box {
      width: 100%;
      height: 100%;
      padding-top: 82px;
    }
    .hot {
      padding: 20px;
      font-size: 36px; /*px*/
      color: #ff7256;
      margin-top: 40px;
    }
    .comment-item {
      margin-top: 20px;
      border-bottom: 1px solid #eee;
      padding: 20px;
      .user {
        font-size: 26px; /*px*/
        color: #666;
        margin-bottom: 10px;
        span {
          margin: 0 6px;
        }
      }
      .contant {
        min-height: 100px;
        font-size: 30px; /*px*/
        height: auto;
        margin-bottom: 10px;
        .parent {
          border: 1px solid #ccc;
          color: #666;
          padding: 20px;
        }
        .parent-sub {
          margin-right: 6px;
        }
      }
      .other {
        display: flex;
        justify-content: space-between;
        .time {
          font-size: 26px; /*px*/
          color: #666;
        }
        .uptimes {
          font-size: 30px; /*px*/
        }
      }
    }
  }
</style>
